<template>
  <div class="iCountUp">
    <ICountUp
      :delay="delay"
      :endVal="endVal"
      :options="options"
      @ready="onReady"
    />
  </div>
</template>

<script type="text/babel">
import ICountUp from 'vue-countup-v2'

export default {
  name: 'countUp',
  props: {
    endVal: {
      type: Number,
      default: 12138
    }
  },
  data () {
    return {
      // 延时加载
      delay: 1000,
      // 您想要达到的值
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        prefix: '',
        suffix: ''
      }
    }
  },
  components: {
    ICountUp
  },
  mounted () {
  },
  methods: {
    onReady: function (instance, CountUp) {
      const that = this
      instance.update(that.endVal)
    }
  }
}
</script>

<style scoped>
.iCountUp {
  font-size: 3em;
  margin: 0;
  color: #4d63bc;
}
</style>
